<template>
  <!--  TODO 客服评价表 -->
  <div class="page-container">
    <el-card class="box-card">
      <el-row>
      </el-row>

      <div class="table-box">
        <el-table :data="tableList" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="name" align="center">
            <template #header>
              <div>
                <span>客服姓名</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="verySatisfied" label="非常满意">
            <template #header>
              <div>
                <span class="title">非常满意</span>
                <svg class="icon satisfaction-level" aria-hidden="true">
                  <use xlink:href="#icon-daochu1024-35"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="satisfied" label="满意">
            <template #header>
              <div>
                <span class="title">满意</span>
                <svg class="icon satisfaction-level" aria-hidden="true">
                  <use xlink:href="#icon-daochu1024-34"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="generally" label="一般">
            <template #header>
              <div>
                <span class="title">一般</span>
                <svg class="icon satisfaction-level" aria-hidden="true">
                  <use xlink:href="#icon-daochu1024-33"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="dissatisfied" label="不满意">
            <template #header>
              <div>
                <span class="title">不满意</span>
                <svg class="icon satisfaction-level" aria-hidden="true">
                  <use xlink:href="#icon-daochu1024-32"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="bad" label="差评">
            <template #header>
              <div>
                <span class="title">差评</span>
                <svg class="icon satisfaction-level" aria-hidden="true">
                  <use xlink:href="#icon-daochu1024-31"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="params.current"
              v-model:page-size="params.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="getTableList"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {reactive, toRefs, onMounted} from 'vue'
import '/@/theme/js/SatisfactionLevel';

export default {
  name: "CustomerServiceEvaluation",
  setup() {
    const state = reactive({
      tableList:[
        {
          id:0,
          name:"刘",
          verySatisfied:"1",
          satisfied:"1",
          generally:"1",
          dissatisfied:"1",
          bad:"1",
        },
        {
          id:1,
          name:"李",
          verySatisfied:"2",
          satisfied:"2",
          generally:"2",
          dissatisfied:"2",
          bad:"2",
        }
      ],
      params: {
        current: 1,
        size: 10,
        keywords:'',
        st: null,
        et: null
      },
      total: 0,
    })

    //页码
    const sizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getTableList()
    }

    //获取数据
    const getTableList = () => {

    }

    onMounted(() => {

    })
    return {
      ...toRefs(state),
      sizeChange,
      getTableList,

    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

    .satisfaction-level{
      font-size: 30px;
    }

    .title{
      position: relative;
      top: -4px;
      padding: 3px 3px;
    }

  }
}
</style>
